<template>
  <div title="搜索标签" v-if="chidlOpen">
    <transition name="fade">
      <div class="dialog">
        <div>
          <input
            type="text"
            class="serachInput"
            v-model="dialogInput"
            @input="handleQuery"
            placeholder="请输入搜索内容"
          />
          <button @click="closedDialog">关闭弹框</button>
        </div>
        <!-- 弹框里面的列表  -->
        <div class="chiddiv">
          <ul>
            <li
              v-for="(chidTag, index) in dialogTags"
              :key="index"
              class="chidliLay"
            >
              <div v-html="chidTag"></div>
            </li>
          </ul>
          <div v-if="showTip">"暂无匹配数据"</div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { defineComponent, ref, getCurrentInstance } from "vue";
let timer = null;
export default defineComponent({
  props: {
    chidlOpen: {
      type: Boolean,
      default: false,
    },
    dataList: {
      type: Array,
      default: () => {
        [];
      },
    },
  },
  setup(props) {
    const { proxy } = getCurrentInstance();
    const showTip = ref(false);
    const dialogInput = ref("");
    const dialogTags = ref([]);

    //关闭弹框
    const closedDialog = () => {
      proxy.$emit("closed");
    };

    //搜索框的节流
    function throttle(fn, delay = 300) {
      return function () {
        if (timer == null) {
          timer = setTimeout(() => {
            fn();
            clearTimeout(timer);
            timer = null;
          }, delay);
        }
      };
    }

    // function throttle(fn, delay) {
    //   var prev = Date.now();
    //   return function () {
    //     var now = Date.now();
    //     if (now - prev > delay) {
    //       fn();
    //       prev = Date.now();
    //     }
    //   };
    // }

    const handleQuery = throttle(function () {
      if (dialogInput.value) {
        dialogTags.value = [];
        props.dataList.forEach((item) => {
          // console.log("itemdddd" + item.content);
          if (item.content.indexOf(dialogInput.value) != -1) {
            console.log("匹配到了" + item.content);
            const regExp = new RegExp(dialogInput.value, "g"); //空格的正则
            var msg = item.content;
            var htmlDiv =
              '<span style="color: blue;">' + dialogInput.value + "</span>";
            // console.log(htmlDiv);
            msg = msg.replace(regExp, htmlDiv);
            dialogTags.value.push(msg);
          }
          if (dialogTags.value.length == 0) {
            showTip.value = true;
          } else {
            showTip.value = false;
          }
        });
      } else {
        dialogTags.value = [];
      }
    }, 1000);
    return {
      closedDialog,
      handleQuery,
      dialogInput,
      dialogTags,
      showTip,
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dialog {
  width: 400px;
  height: 300px;
  background-color: #f5f5f5;
  padding: 20px;
  position: fixed;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
}
.serachInput {
  width: 200px;
  min-height: 30px;
  padding-left: 10px;
  margin-right: 20px;
  border-radius: 4px;
  margin-top: 30px;
}

.chidliLay {
  margin-top: 8px;
  margin-bottom: 8px;
  list-style-type: none;
  width: 200px;
  display: flex;
  justify-content: space-between;
  background-color: white;
  margin-left: 5px;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 4px;
  border-radius: 4px;
  align-items: center;
}
</style>
